<template>
  <div class="stationStatistics">
    <!-- 图表主体 -->
    <div class="chartContent" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { useECharts } from '@gui-pkg/hooks';
  import setChartOption from './chartOption';
  import { getStbprpbTypeList } from '@/api/oneMap/baseData';

  defineOptions({ name: 'StationStatistics' });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);


  const state = reactive({
    name: 'vue3',
  });

  onMounted(async() => {
    const data = await getStbprpbTypeList();
    console.log(data, 'datadatadata');
    const chartOption = setChartOption(data);
    setOptions(chartOption);
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .stationStatistics {
    width: 100%;
    height: 100%;
    .chartContent {
      width: 100%;
      height: 100%;
    }
  }
</style>
